<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
          width: 200px;
          height: 200px;
          background-color: pink;
        }
      </style>
</head>
<body>
    <div></div>
  <script>
 //     鼠标事件
 const div  = document.querySelector('div')

// 鼠标事件是用户与网页交互时最常见的事件类型之一。这些事件包括：
// click：当用户单击主鼠标按钮或按下回车键时触发。
// div.addEventListener('click',function(){
//   console.log('单击了');
  
// })
// dblclick：当用户双击主鼠标按钮时触发。
// div.addEventListener('dblclick',function(){
//   console.log('双击了');
  
// })
// mousedown：当用户按下鼠标任意按钮时触发。
div.addEventListener('mousedown',function(){
    console.log('鼠标被按下了');
    
})

// mouseup：当用户释放鼠标任意按钮时触发。
div.addEventListener('mouseup',function(){
    console.log('鼠标被弹起了');
    
})
// mousemove：当鼠标在元素上移动时触发。
div.addEventListener('mousemove',function(){
    console.log('鼠标被移动了');
    
})

// mouse over：当鼠标进入元素时触发。
div.addEventListener('mouseover',function(){
    console.log('鼠标被进入box了');
    
})
// mouse out：当鼠标离开元素时触发。
div.addEventListener('mouseout',function(){
    console.log('鼠标被离开box了');
    
})
// mouseenter：当鼠标进入元素时触发，不冒泡。
// mouseleave：当鼠标离开元素时触发，不冒泡。

   



    // // 鼠标经过
    // div.addEventListener('mouseenter', function () {
    //   console.log(`轻轻的我来了`)
    // })
    // // 鼠标离开
    // div.addEventListener('mouseleave', function () {
    //   console.log(`轻轻的我走了`)
    // })


    

  </script>
</body>
</html>